import React, { useEffect } from "react"
import styles from './read.less';
import { useSelector, useDispatch, useHistory } from 'umi';
import { Readlist } from "@/utils/msgabroad";
import { HeartOutlined, EyeOutlined, ShareAltOutlined } from '@ant-design/icons';
var moment = require('moment');
const Read: React.FC = (props) => {
    const result = useSelector((state: { msgboard: any; }) => state.msgboard);
    const dispatch = useDispatch();
    //获取推荐阅读
    useEffect(() => {
        dispatch({
            type: "msgboard/getRead",
        });
    }, []);
    //时间差
    function dateFormat(date: any) {
        let m2 = moment();  //当下时间
        // let m2=moment('2019-12-18 10:10:00');
        let m1 = moment(date);
        let du = moment.duration(m2 - m1, 'ms');   //做差
        let months = du.get("months")
        let days = du.get('days');
        let hours = du.get('hours');
        let mins = du.get('minutes');
        //  输出结果为   01天08时09分40秒
        if (months > 0) {
            return (months + 1) + "个月之前"
        } else if (days > 0) {
            return days + "天之前"
        } else if (hours > 0) {
            return hours + '小时之前'
        } else {
            return mins + '分钟之前'
        }
    };
    const history = useHistory();
    function goDetail(id: string) {
        history.push("/page/readDetail", id)
    }
    return <div className={styles.list}>
        {
            result.list.data && result.list.data.map((item: Readlist, index: number) => {
                return <div key={index} className={styles.item} onClick={()=>{goDetail(item.id)}}>
                    <p><span>{item.title}</span><span>{dateFormat(item.createAt)}</span><span>{item.category?item.category.label:''}</span></p>
                    <dl>
                        <dt>
                            <img src={item.cover} /></dt>
                        <dd>
                            <p>{item.summary}</p>
                            <p><HeartOutlined /><span>{item.likes}</span><EyeOutlined /><span>{item.views}</span><ShareAltOutlined /><span>分享</span></p>
                        </dd>
                    </dl>
                </div>
            })
        }
    </div>
}
export default Read